<template>
    <div class="content">
        <div class="main">
            <div class="aside">
                <Aside @sendData="updateUser" :token="userInfo.token" :username="userInfo.username"
                    :headPic="userInfo.headPic"></Aside>
            </div>
            <div class="logo" v-if="showLogo">
                <span>BLUE</span>
            </div>
            <div class="chat">
                <chat @sendData="updateData" :token="userInfo.token" :username="userInfo.username"></chat>
            </div>
            <login @sendData="updateUser"></login>
        </div>
    </div>
</template>
<script setup>
import Aside from './aside.vue';
import chat from './chat.vue';
import { ref, onMounted } from 'vue';
import login from './login.vue';

const showLogo = ref(true)
const userInfo = ref({})
const updateData = (data) => {
    showLogo.value = data
}
const updateUser = (user) => {
    userInfo.value = user
}
onMounted(() => {
    const str = window.localStorage.getItem("access-admin")
    if (str) {
        userInfo.value = JSON.parse(str)
    }
})
</script>
<style lang="less" scoped>
.el-card {
    border-radius: 20px;
}

.content {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;

    .main {
        display: flex;
        align-items: center;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        width: 70vw;
        gap: 30px;

        .aside {
            /* 固定定位 */
            position: fixed;
            /* 距离左边0像素 */
            left: 1%;
            /* 距离顶部0像素 */
            top: 20%;
            /* 距离顶部0像素 */
            z-index: 999;
        }

        .logo {
            font-size: 100px;
            font-weight: 700;
            text-align: center;
            font-family: Georgia, "Times New Roman", Times, serif;
            background: linear-gradient(200deg, var(--sub-theme-color), var(--theme-color));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .chat {
            width: 100%;
        }
    }
}

@media screen and(max-width:1000px) {
    .content {
        .main {
            width: 95vw;
            gap: 0;

            .logo {
                margin-bottom: 20px;
            }
        }
    }
}
</style>